<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>报表设计器</title>
<style type="text/css">
  /** 表单查询条件  **/
  .select-list ul {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  .select-list li {
    list-style: none;
  }
  .select-list li p, .select-list li label:not(.radio-box){
    float: left;
    width: 65px;
    margin: 5px 0px 0px 0px;
    text-align:right;
  }

  .select-list li input {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: transparent;
    outline: none;
    height: 30px;
    width: 200px;
    padding-left: 5px;
  }

  .select-list li .submit-btn {
    border: 0px;
    border-radius: 4px;
    background: transparent;
    outline: none;
    width: 40px;
    height: 23px;
  }

  .select-list li select {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: transparent;
    outline: none;
    height: 30px;
    width: 200px;
  }
</style>
<!-- Le styles -->
<link th:href="@{/layoutit/css/bootstrap-combined.min.css}" rel="stylesheet">
<link th:href="@{/layoutit/css/layoutit.css}" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
		<script th:src="@{/layoutit/js/html5shiv.js}"></script>
	<![endif]-->

	<!-- Fav and touch icons -->
	<link rel="shortcut icon" th:href="@{/layoutit/img/favicon.png}">
	
	<script type="text/javascript" th:src="@{/layoutit/js/jquery-2.0.0.min.js}"></script>
	<!--[if lt IE 9]>
	<script type="text/javascript" th:src="@{/layoutit/http://code.jquery.com/jquery-1.9.1.min.js}"></script>
	<![endif]-->
	<script type="text/javascript" th:src="@{/layoutit/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/layoutit/js/jquery-ui.js}"></script>
	<script type="text/javascript" th:src="@{/layoutit/js/jquery.ui.touch-punch.min.js}"></script>
<script type="text/javascript" th:src="@{/layoutit/js/jquery.htmlClean.js}"></script>
<script type="text/javascript" th:src="@{/layoutit/ckeditor/ckeditor.js}"></script>
<script type="text/javascript" th:src="@{/layoutit/ckeditor/config.js}"></script>
<script type="text/javascript" th:src="@{/layoutit/js/scripts.js}"></script>
  <script th:src="@{/ruoyi/js/ry-ui.js}"></script>
</head>

<body style="min-height: 660px; cursor: auto;" class="edit">
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="brand" href="http://justjavac.com/tools/layoutit/"><img th:src="@{/layoutit/img/favicon.png}"> 可视化布局<span class="label">BETA</span></a>
      <div class="nav-collapse collapse">
      	<ul class="nav" id="menu-layoutit">
          <li class="divider-vertical"></li>
          <li>
            <div class="btn-group" data-toggle="buttons-radio">
              <button type="button" id="edit" class="btn btn-primary active"><i class="icon-edit icon-white"></i>编辑</button>
              <button type="button" class="btn btn-primary" id="sourcepreview"><i class="icon-eye-open icon-white"></i>预览</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary" data-target="#downloadModal" role="button" data-toggle="modal"><i class="icon-chevron-down icon-white"></i>下载</button>
              <button class="btn btn-primary" role="button" data-toggle="modal" data-target="#shareModal"><i class="icon-share icon-white"></i>发布</button>
              <button class="btn btn-primary" href="#clear" id="clear"><i class="icon-trash icon-white"></i>清空</button>
            </div>
            <div class="btn-group">
								<button class="btn btn-primary" href="#undo" id="undo" ><i class="icon-arrow-left icon-white"></i>撤销</button>
								<button class="btn btn-primary" href="#redo" id="redo" ><i class="icon-arrow-right icon-white"></i>重做</button>
			</div>
          </li>
        </ul>
        <ul class="nav pull-right">
               	  <li>
               	  <div class="btn-group">
			      </div>
			      </li>
          </ul>
      </div>
      <!--/.nav-collapse --> 
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="">
      <div class="sidebar-nav">
        <ul class="nav nav-list accordion-group">
          <li class="nav-header">
            <div class="pull-right popover-info"><i class="icon-question-sign "></i>
              <div class="popover fade right">
                <div class="arrow"></div>
                <h3 class="popover-title">功能</h3>
                <div class="popover-content">在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值, 如果您需要了解更多信息，请访问<a target="_blank" href="http://twitter.github.io/bootstrap/scaffolding.html#gridSystem">Bootstrap栅格系统.</a></div>
              </div>
            </div>
            <i class="icon-plus icon-white"></i> 布局设置 </li>
          <li style="display: list-item;" class="rows" id="estRows">
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="12" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span12 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="6 6" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span6 column"></div>
                  <div class="span6 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="8 4" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span8 column"></div>
                  <div class="span4 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="4 4 4" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span4 column"></div>
                  <div class="span4 column"></div>
                  <div class="span4 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="2 6 4" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span2 column"></div>
                  <div class="span6 column"></div>
                  <div class="span4 column"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <ul class="nav nav-list accordion-group">
          <li class="nav-header"><i class="icon-plus icon-white"></i> 基本CSS
            <div class="pull-right popover-info"><i class="icon-question-sign "></i>
              <div class="popover fade right">
                <div class="arrow"></div>
                <h3 class="popover-title">帮助</h3>
                <div class="popover-content">这里提供了一系列基本元素样式，你可以通过区块右上角的编辑按钮修改样式设置。如需了解更多信息，请访问<a target="_blank" href="http://twitter.github.io/bootstrap/base-css.html">基本CSS.</a></div>
              </div>
            </div>
          </li>
          <li style="display: none;" class="boxes" id="elmBase">
            <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> 
            	 <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="text-left">靠左</a></li>
                <li class=""><a href="#" rel="text-center">居中</a></li>
                <li class=""><a href="#" rel="text-right">靠右</a></li>
              </ul>
              </span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="muted">禁用</a></li>
                <li class=""><a href="#" rel="text-warning">警告</a></li>
                <li class=""><a href="#" rel="text-error">错误</a></li>
                <li class=""><a href="#" rel="text-info">提示</a></li>
                <li class=""><a href="#" rel="text-success">成功</a></li>
              </ul>
              </span> </span>
              <div class="preview">标题栏</div>
              <div class="view">
                <h3 contenteditable="true">h3. 这是一套可视化布局系统.</h3>
              </div>
            </div>

            <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> </span>
              <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
              <div class="preview">查询表单</div>
              <div class="view">
                  <form id="formId" class="form-inline">
                    <label>开始：</label>
                    <input type="text" class="form-control input-small" id="dateBegin" placeholder="yyyy-MM-dd">
                    <label>结束：</label>
                    <input type="text" class="form-control input-small" id="dateEnd" placeholder="yyyy-MM-dd">
                    <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                  </form>
              </div>
            </div>

          </li>
        </ul>
        <ul class="nav nav-list accordion-group">
          <li class="nav-header"><i class="icon-plus icon-white"></i> 图表设计
            <div class="pull-right popover-info"><i class="icon-question-sign "></i>
              <div class="popover fade right">
                <div class="arrow"></div>
                <h3 class="popover-title">帮助</h3>
                <div class="popover-content">拖放组件到布局框内. 拖入后你可以设置组件样式. 查看这里获取更多帮助 <a target="_blank" href="http://twitter.github.io/bootstrap/components.html">Components.</a></div>
              </div>
            </div>
          </li>

          <li style="display: none;" class="boxes mute" id="elmComm">
            <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" onclick="shapeStype(this)">样式定义</button></span>
              <div class="preview">饼图</div>
              <div class="view">
                <div name="viewContent" type="chart" style="margin-top: 15px">
                    <div name="param" ></div>
                  <div class="panel panel-default">
                    <div class="panel-body"><div name="chart"></div></div>
                  </div>

                    <img alt="140x140" style="width: 350px;height: 250px" th:src="@{/layoutit/img/pie.jpg}" class="removeClean">
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--/span-->
    <div class="demo ui-sortable" id="mainDesign" style="min-height: 304px; ">

    </div>
    <!-- end demo -->
    <!--/span-->
    <div id="download-layout">
      <div class="container-fluid"></div>
    </div>
  </div>
  <!--/row--> 
</div>
<!--/.fluid-container--> 
<div class="modal hide fade" role="dialog" id="editorModal">
  <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
    <h3>编辑</h3>
  </div>
  <div class="modal-body">
    <p>
      <textarea id="contenteditor"></textarea>
    </p>
  </div>
  <div class="modal-footer"> <a id="savecontent" class="btn btn-primary" data-dismiss="modal">保存</a> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<div class="modal hide fade" role="dialog" id="downloadModal">
  <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
    <h3>下载</h3>
  </div>
  <div class="modal-body">
    <p>已在下面生成干净的HTML, 可以复制粘贴代码到你的项目.</p>
    <div class="btn-group">
      <button type="button" id="fluidPage" class="active btn btn-info"><i class="icon-fullscreen icon-white"></i> 自适应宽度</button>
      <button type="button" class="btn btn-info" id="fixedPage"><i class="icon-screenshot icon-white"></i> 固定宽度</button>
    </div>
    <br>
    <br>
    <p>
      <textarea></textarea>
    </p>
  </div>
  <div class="modal-footer"> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<div class="modal hide fade" role="dialog" id="shareModal">
  <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
    <h3>发布</h3>
  </div>
  <div class="modal-body">
    <form class="form-horizontal m" id="form-base-add">
      <input type="text" name="idChartConfig" style="display: none"/>
      <input type="text" name="config" id="config" style="display: none"/>
      <div class="control-group">
        <label class="col-sm-3 control-label">名称：</label>
        <div class="col-sm-8">
          <input name="na" id="configNa" class="form-control" type="text">
        </div>
      </div>
      <div class="control-group">
        <label class="col-sm-3 control-label">URL：</label>
        <div class="col-sm-8">
          <input name="url" class="form-control" type="text" id="url" disabled>
        </div>
      </div>
      <div class="control-group">
        <label class="col-sm-3 control-label">日期类型：</label>
        <div class="col-sm-8">
            <select name="euDttp" id="euDttp">
              <option value="D">天</option>
              <option value="M">月</option>
              <option value="Q">季</option>
              <option value="Y">年</option>
            </select>
        </div>
      </div>
      <div class="control-group">
        <label class="col-sm-3 control-label">是否范围：</label>
        <div class="col-sm-8">
          <select name="fgScope" id="fgScope">
            <option value=0>单日期</option>
            <option value=1>范围</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="col-sm-3 control-label">维度1：</label>
        <div class="col-sm-8">
          <select name="idPubfld1">
            <option></option>
            <option value="ID_DIM_ORGAN">机构</option>
            <option value="ID_DIM_DEPT_HIS">HIS科室</option>
            <option value="ID_DIM_DEPTNUR">HIS病区</option>
          </select>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer"> <a class="btn" onclick="saveConfig()">保存</a> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<script>
  var dataElement;
  function shapeStype(ele){
    dataElement = $(ele).parent().parent().find("div[name='param']");
    $.modal.openFull('定义图表样式', "/etl/query/withStype",null,null,callback);
  }
  function callback(index, layero) {
    var iframeWin = layero.find('iframe')[0];
    var style = iframeWin.contentWindow.submitHandler(index, layero);
    dataElement.html(style);
  }

  function saveConfig() {
    var fields = $('#form-base-add').serializeArray();
    var obj = {}; //声明一个对象
    $.each(fields, function(index, field) {
      obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
    })
    $.ajax({
      url: '/base/chart/config/add',
      type: 'post',
      dataType: 'json',
      contentType: 'application/json;charset=UTF-8',
      data: JSON.stringify(obj),
      success: function (result) {
        if(result.code==0) {
           $("#shareModal").modal('hide');
        }
      }
    });
     // $.operate.save("/base/chart/config/add", $('#form-base-add').serialize());
  }
</script>
</body>
</html>
